<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>Start with pixi.js</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.4.3/pixi.min.js"></script>
<script type="text/javascript">
//别名（Aliases）
var Container = PIXI.Container,
    autoDetectRenderer = PIXI.autoDetectRenderer,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    TextureCache = PIXI.utils.TextureCache,
    Sprite = PIXI.Sprite;

//基础代码
var stage = new Container(),
    renderer = autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);

//读取文件的路径设置与读取后执行的函数
loader
  .add([
    "images/cat.png"
  ])
  .load(setup);

var cat;

function setup() {
  cat = new Sprite(resources["images/cat.png"].texture);

  // 初始化
  cat.vx = 0;
  cat.vy = 0;
  stage.addChild(cat);
 
  gameLoop();
}

function gameLoop(){

  requestAnimationFrame(gameLoop);

  // 每次向右3px，向下2px
  cat.vx = 3;
  cat.vy = 2;

  cat.x += cat.vx;
  cat.y += cat.vy;

  renderer.render(stage);
}
</script>
</body>
</html>